<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<div id="app">
    <student></student>
</div>

<script>

    /*
    * 自定义组件中 data需要以函数的形式编写
    * 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
    * */

    // 学生组件
    const student = {
        template: `
          <div>
            <h1>学生信息</h1>
            <p>姓名:{{ name }}</p>
            <p>年龄:{{ age }}</p>
            <p>班级:{{ clazz }}</p>
          </div>
        `,
        data() {
            return {
                name: 'tom',
                age: 20,
                clazz: 'python2512'
            }
        }
    }
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            student
        }
    })
</script>
</body>
</html>
